<template>
  <div class="zhiboxiaoshou_fabu">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/zhiboxiaoshou' }">直播销售</el-breadcrumb-item>
            <el-breadcrumb-item>发布直播页</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="flex" style="margin: 20px 0;">
            <el-button type="primary" @click="add(1)">添加图片模块</el-button>
            <el-button type="primary" @click="add(2)">添加文字模块</el-button>
            <el-button type="primary" @click="add(3)">添加轮播图模块</el-button>
          </div>
          <div class="flex" >
            <div class="fleft">
              <div style="height: 620px; overflow: auto;">
                <div class="li" v-for="(item,index) in list" :key="index"  :class="bianjiindex == index?'bianjizhong':''" >
                  <div v-if="item.type == 1" @click="bianji(item,index,$event)" :ref="'li'+index">
                    <div v-if="!item.img" class="awu">请点击编辑图片...</div>
                    <div v-if="item.img"><img :src="item.img" ></div>
                  </div>
                  <div v-if="item.type == 2" @click="bianji(item,index,$event)" :ref="'li'+index">
                    <div v-if="!item.text" class="awu">请点击编辑文字....</div>
                    <div v-if="item.text" style="font-size: 14px;padding: 10px;color: #666;">{{item.text}}</div>
                  </div>
                  <div v-if="item.type == 3" @click="bianji(item,index,$event)" :ref="'li'+index" style="width: 100%;height: 200px;">
                    <el-carousel height="200px" arrow="never" >
                        <el-carousel-item v-for="(item2,index2) in item.list" :key="index2" :style="{background:'url('+item2.img+')',backgroundSize:'cover'}">
                          <div v-if="!item2.img" class="awu">请先编辑图片...</div>
                          <!-- <div v-if="item2.img"><img :src="item2.img" ></div> -->
                        </el-carousel-item>
                      </el-carousel>
                  </div>
                  <div v-if="item.type == 4" @click="bianji(item,index,$event)" :ref="'li'+index">
                    <div class="flex" style="justify-content: space-around;padding: 20px 0;">
                      <div class="nav" v-for="(item2,index2) in item.list" :key="index2">
                        <div class="flexcc" v-if="!item2.img"><img src="../../../static/img/1.jpg"></div>
                        <div class="flexcc" v-if="item2.img"><img :src="item2.img"/></div>
                        <div v-if="item2.name" style="font-size: 14px;">{{item2.name}}</div>
                      </div>
                    </div>
                  </div>
                  <div v-if="item.type == 5" @click="bianji(item,index,$event)" :ref="'li'+index">

                    <div class="flex" v-if="radio == 1">

                      <div class="yige flex" v-for="item2 in item.list" :key="index2">
                        <div class="shopliimg"><img :src="item2.img"/></div>
                        <div class="shopliname">
                          <div style="line-height: 20px;">{{item2.name}}</div>
                          <div class="flexbc" style="height: 49px;">
                            <div style="color: #E90010;">$1.99</div>
                            <div style="color: #E90010;border: 1px #E90010 solid;border-radius: 15px;padding: 5px 10px;">立即抢购</div>
                          </div>
                        </div>
                      </div>

                    </div>
                    <div class="flexb" v-if="radio == 2">

                      <div class="liangge " v-for="item2 in item.list" :key="index2">
                        <div class="shopliimg"><img :src="item2.img"/></div>
                        <div class="shopliname">
                          <div style="line-height: 20px;">{{item2.name}}</div>
                          <div style="color: #E90010;">$1.99</div>
                        </div>
                      </div>

                    </div>
                  </div>

                </div>

              </div>


            </div>
            <div class="shunxu" v-if="bianjiindex != null" :style="{top:bianjitop+'px'}">
              <div>
                <div><img src="https://static.91haoka.cn/gantanhao/shang.png" @click="shang()"></div>
                <div><img src="https://static.91haoka.cn/gantanhao/xia.png" @click="xia()"></div>
                <div><img src="https://static.91haoka.cn/gantanhao/shanchu.png" @click="shan()"></div>
              </div>

            </div>
            <div class="fright">
              <div v-if="bianjitype == 1">
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">上传图片:</div>
                  <div class="r">
                    <chuantu ref="chuantu" @getimg="getimg"></chuantu>
                  </div>
                </div>
                 <div class="flexc" style="margin-bottom: 20px;">
                   <div class="z">图片链接:</div>
                   <div class="r">
                     <el-input v-model="list[bianjiindex].url" placeholder="请输入图片链接"></el-input>
                   </div>
                 </div>
              </div>

              <div v-if="bianjitype == 2">
                 <div class="flexc" style="margin-bottom: 20px;">
                   <div class="z">编辑文字:</div>
                   <div class="r">
                     <el-input v-model="list[bianjiindex].text" placeholder="请输入图片链接"></el-input>
                   </div>
                 </div>
              </div>

              <div v-if="bianjitype == 3">
                <el-button type="primary" @click="add2()">增加一张</el-button>
                <div v-for="(item,index) in list[bianjiindex].list" :key="index">
                  <div class="flexc" style="margin-bottom: 20px;">
                    <div class="z">上传图片:</div>
                    <div class="r">
                      <chuantu ref="chuantu2" @getimg="getimg2($event,index)"></chuantu>
                    </div>
                  </div>
                   <div class="flexc" style="margin-bottom: 20px;">
                     <div class="z">图片链接:</div>
                     <div class="r">
                       <el-input v-model="item.url" placeholder="请输入图片链接"></el-input>
                     </div>

                   </div>
                </div>
              </div>

              <div v-if="bianjitype == 4">
                 <div class="flexc" style="margin-bottom: 20px;">
                   <div class="z">菜单设置:</div>
                   <div class="r">

                     <div class="flexc" style="margin-bottom: 20px;" v-for="(item,index) in list[bianjiindex].list">
                       <div class="z">菜单{{index+1}}:</div>
                       <div class="r">
                         <chuantu ref="chuantu2" @getimg="getimg3($event,index)"></chuantu>
                         <el-input style="margin: 10px 0;" v-model="list[bianjiindex].list[index].name" placeholder="请输入名称"></el-input>

                         <div>
                           <el-radio-group v-model="item.dizhi">
                               <el-radio :label="1">自定义</el-radio>
                               <el-radio :label="2">联系客服</el-radio>
                               <el-radio :label="3">查看订单</el-radio>
                             </el-radio-group>
                         </div>
                         <div><el-input v-if="item.dizhi == 1" v-model="item.url" placeholder="请输入图片链接"></el-input></div>
                       </div>


                     </div>
                   </div>
                 </div>
              </div>

              <div v-if="bianjitype == 5">
                 <div class="flexc" style="margin-bottom: 20px;">
                   <div class="z">分栏:</div>
                   <div class="r">
                      <el-radio v-model="radio" label="1">一排一个</el-radio>
                      <el-radio v-model="radio" label="2">一排俩</el-radio>
                   </div>
                 </div>
              </div>

            </div>
          </div>

          <div style="height: 100px;" class="flexcc">
            <el-button type="danger" size="medium" @click="xiayibu()">下一步</el-button>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../zujian/chuantu.vue";
  export default {
    components: {
      top,
      left,
      chuantu
    },
    name: "zhiboxiaoshou_fabu",
    data() {
      return {
        list: [
          
        ],
        tongbuall: "",
        log: false,

        input: "",
        all: {
          erweima: ""
        },
        all2: {
          erweima: ""
        },
        bianjiindex:null,
        bianjitype:null,
        bianjitop:-9999,
        radio:'1'
      }
    },
    created() {
      console.log(this.list.includes(item=>item.type == 4))
      if(this.list.findIndex(item=>item.type == 4) == -1){
        this.list.push(
          {
            type:4,
            list:[
              {img:"https://static.91haoka.cn/gantanhao%2Fdh1.png",name:"号卡列表",dizhi:1,url:""},
              {img:"https://static.91haoka.cn/gantanhao%2Fdh2.png",name:"联系客服",dizhi:2,url:"/kefu.html"},
              {img:"https://static.91haoka.cn/gantanhao%2Fdh3.png",name:"订单查询",dizhi:3,url:"/dingdan.html"},
            ]
          }
        )
      }
      if(this.list.findIndex(item=>item.type == 5) == -1){
        this.list.push(
          {
            type:5,
            list:[
              {img:"https://static.91haoka.cn/gantanhao%2Fsp.png",name:"标题实例"},
              {img:"https://static.91haoka.cn/gantanhao%2Fsp2.jpg",name:"标题实例"},
              {img:"https://static.91haoka.cn/gantanhao%2Fsp3.png",name:"标题实例"},
              {img:"https://static.91haoka.cn/gantanhao%2Fsp4.png",name:"标题实例"},
              {img:"https://static.91haoka.cn/gantanhao%2Fsp5.png",name:"标题实例"},
              {img:"https://static.91haoka.cn/gantanhao%2Fsp.png",name:"标题实例"},
            ]
          }
        )
      }
      console.log(this.list)

    },
    mounted() {

    },
    methods: {
      xia:function(){

        let arr = this.list
        let index1 = this.bianjiindex
        let index2 = this.bianjiindex + 1

        if(index2 < arr.length){
          [arr[index1] , arr[index2]]  = [arr[index2] , arr[index1]]
          this.bianjiindex = index2
        }
      },
      shang:function(){
        let arr = this.list
        let index1 = this.bianjiindex
        let index2 = this.bianjiindex - 1
        if(index2 >= 0){
          [arr[index1] , arr[index2]]  = [arr[index2] , arr[index1]]
          this.bianjiindex = index2
        }
      },
      bianji:function(item,index,e){

        // this.$refs.chuantu.img = item.img
        this.bianjiindex = index
        this.bianjitype = item.type
        this.bianjitop = e.target.offsetTop
        console.log(e)
        console.log(this.bianjitop)


        if(item.type == 1 && this.list[this.bianjiindex].img != undefined){
          this.$nextTick(()=>{
            this.$refs.chuantu.img = this.list[this.bianjiindex].img
          })
        }
        if(item.type == 2){

        }
        if(item.type == 3){
          this.$nextTick(()=>{
            this.list[this.bianjiindex].list.forEach((item2,index2)=>{
              this.$refs.chuantu2[index2].img = item2.img
            })
          })
        }
      },
      bianji2:function(item,index){

        // this.$refs.chuantu.img = item.img
        this.bianjiindex = index
        this.bianjitype = item.type



        this.$nextTick(()=>{
          this.list[this.bianjiindex].list.forEach((item2,index2)=>{
            console.log(item2)
            this.$refs.chuantu2[index2].img = item2.img
          })
        })
      },
      add2:function(){
        this.list[this.bianjiindex].list.push(
          {img:"",url:""}
        )
      },
      add:function(type){
        if(type == 1){
          this.list.push(
            {type:1,img:"",url:""}
          )
        }

        if(type == 2){
          this.list.push(
            {type:2,text:""}
          )
        }

        if(type == 3){
          this.list.push(
            {
              type:3,list:[
                {img:"",url:""}
              ],
            }
          )
        }

      },
      getimg: function(img) {
        this.list[this.bianjiindex].img = img
      },
      getimg2:function(img,index){
        this.list[this.bianjiindex].list[index].img = img
      },
      getimg3:function(img,index){
        this.list[this.bianjiindex].list[index].img = img
      },


      xiayibu:function(){
        let all = {
              "id": this.$route.query.id,
              "type": "json",
              "path": "store",
              "data": this.list
        }
        axios.post("/api/web/page/json",all)
          .then(response => {
            if(response.data.msg.code == 0){

            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      getxq:function(){
        axios.get(`/api/web/store/info?id=${this.$route.query.id}`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.all = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      }
    }
  }
</script>

<style scoped lang="scss">
  .zhiboxiaoshou_fabu {
    background: #f2f2f2;
    color: #333;
    min-height: 100vh;
    img{ display: block;}
    /deep/ .el-breadcrumb {
      font-size: 16px;
    }

    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 0px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 0px;
    }

    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      background: #eee;
    }

    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #fff;
    }

    * {
      box-sizing: border-box;
    }

    .zhiboxitong_content {
      height: calc(100vh - 70px);

      .left {
        width: 210px;
        background: #3A3E4B;
        height: 100%;
      }

      .ft{ font-size: 18px;margin-bottom: 30px;font-weight: bold;}
      .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
      .r{}

      .right {
        flex-grow: 1;
        padding: 10px;

        .zhiboxitong_right {
          height: calc(100vh - 90px);
          overflow: auto;
          background: #fff;
          border-radius: 5px;
          padding: 20px;
        }
        .shunxu{ padding: 50px 20px; border-radius: 5px;
          img{ width: 15px;margin-bottom: 10px; cursor: pointer;}
        }
        .fleft {
            width: 300px; height: 700px; background: url('https://static.91haoka.cn/gantanhao/shouji3.png');background-size: 300px 700px; padding: 50px 20px;
          .li{
            width: 100%;  border: 1px #eaeaea dashed; margin-bottom: 20px; cursor: pointer;
            img{ width: 100%; display: block;}
            .nav{ text-align: center;
              img{ width: 34px; height:34px;border-radius: 3px;margin-bottom: 10px;}
            }
          }
          .bianjizhong{ border-color: #409EFF;}
          .awu{ padding: 10px; font-size: 14px;color: #999;}

          // .yihang{ justify-content: space-between; padding: 5px;
          //   .shopli{width: 100%; margin-bottom: 10px;}
          // }
          // .lianghang{ justify-content: space-between; padding: 5px;
          //   .shopli{width: 48%; margin-bottom: 10px;}
          // }
          .yige{ margin-bottom: 10px; border-radius: 5px;
            .shopliimg{ width: 89px; margin-right: 10px;
              img{width: 89px;height: 89px; display: block;}
            }
            .shopliname{ color: #999; font-size: 14px;padding: 5px 0;width: 150px;}
          }
          .liangge{width: 123px; border-radius: 5px;
            .shopliimg{ width: 123px;
              img{width: 123px; height: 123px; display: block; }
            }
            .shopliname{ color: #999; font-size: 14px;padding: 5px;}
          }

        }

        .fright {
          margin-left: 100px;
          padding-top: 50px;


        }
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
</style>
